<template>
<div v-if="username!==''" >
  <tiny-tabs v-model="activeName" tab-style="border-card" @click="tabClick">
    <tiny-tab-item key="name0" title="当日任务" name="name0" >
      <today ref="todayRef"></today>
    </tiny-tab-item>
    <tiny-tab-item key="name1" title="已完成任务" name="name1"  >
      <today-done ref="todayDoneRef"></today-done>
    </tiny-tab-item>
    <tiny-tab-item key="name2" title="任务管理" name="name2"  >
      <task ref="taskRef"></task>
    </tiny-tab-item>
    <tiny-tab-item key="name3" title="终端管理" name="name3"  >
      <ters ref="tersRef"></ters>
    </tiny-tab-item>


  </tiny-tabs>


</div>
</template>
<script setup>

import {onMounted, ref} from 'vue'
import {TinyTabs, TinyTabItem} from '@opentiny/vue'
import {useRoute} from "vue-router";
import Today from "@/views/assist/today.vue";
import tool from "@/utils/tool";
import Task from "@/views/assist/taskMan.vue";
import TodayDone from "@/views/assist/todayDone.vue";
import Ters from "@/views/assist/ters.vue";
const route = useRoute()
const activeName = ref('name0')
const username = ref('')
const todayRef = ref(null)
const todayDoneRef = ref(null)
const taskRef = ref(null)
const tersRef = ref(null)

onMounted(() => {
  if(typeof route.query !== 'undefined' && route.query.username) {
    username.value = route.query.username
    tool.data.set('usernameAss', route.query.username)
  }
})

const tabClick = (item) => {
  if(item.name === 'name0') {
    todayRef.value.changeList()
  }
  if(item.name === 'name1') {
    todayDoneRef.value.changeList()
  }
  if(item.name === 'name2') {
    taskRef.value.changeList()
  }
  if(item.name === 'name3') {
    tersRef.value.changeList()
  }
}

</script>

<style scoped>

</style>